<template>
   <!-- 小区活动 -->
    <div class='community_activities alltable'>
        <div class="tabbar">
            <div class='let'>
                <Input prefix="ios-search"  v-model="value" placeholder="请输入关键字" style="width: 300px" />
                <Button @click="search" class="btn_default"><Icon type="ios-search" size="17" class="icon_wy"/>查询</Button>
            </div>

            <div class='rit'>
                <!-- <Button @click="export1"><Icon type="ios-paper-outline"  size="16" class="icon_wy" style='vertical-align: -2px;'/>导出</Button> -->
                <Button @click="search('reset')"><Icon type="ios-refresh" size="22" class="icon_wy" style='vertical-align: -5px;'/>重置刷新</Button>
                <Button @click="modal_add_show"><Icon type="ios-add-circle-outline" size="17" class="icon_wy"/>新增</Button>
            </div>
        </div>
         <div class='tabble'>
            <div><Table :columns="columns" :loading="tab_loading" height="560" :data="data.datas" class="sel_table"></Table></div>
        </div>
       <div class='tab_pages'>
            <Page :total="data.allCount" :page-size="data_axios.pageSize" :current.sync="data_axios.pageIndex"  show-total  @on-change="getBaseAreaactsPageData"></Page>
        </div>
   
        <!-- 新增 -->
        <Modal title="新增" v-model="modal_add" class-name="community_activities" :mask-closable="false">
            <div>
                <Form :label-width="100" class='fomr'  ref="data_add" :model="data_add" :rules="fix_rules">
                    <FormItem label="活动标题：" prop="acttitle">
                        <Input type="text" v-model="data_add.acttitle" size="large"  placeholder="请输入活动标题" style="width:99%"></Input>
                    </FormItem>
                    <FormItem label="活动开始：" prop="actbegtsStr" style="display: inline-block;">
                        <DatePicker type="datetime"  v-model="data_add.actbegtsStr" size="large" placeholder="请选择时间" ></DatePicker>
                    </FormItem>
                    <FormItem label="活动结束：" prop="actendtsStr" style="display: inline-block;">
                        <DatePicker type="datetime" v-model="data_add.actendtsStr" size="large" placeholder="请选择时间"></DatePicker>
                    </FormItem>
                    <FormItem label="报名开始：" prop="regbegtsStr" style="display: inline-block;">
                        <DatePicker type="datetime" v-model="data_add.regbegtsStr" size="large" placeholder="请选择时间" ></DatePicker>
                    </FormItem>
                    <FormItem label="报名结束：" prop="regendtsStr" style="display: inline-block;">
                        <DatePicker type="datetime" v-model="data_add.regendtsStr" size="large" placeholder="请选择时间"></DatePicker>
                    </FormItem>
                    <FormItem label="限制人数：" prop="perqty" style="display: inline-block;">
                        <!-- <Input type="email" size="large" v-model="data_add.perqty" :number="true" style="width:210px;" placeholder="限制人数"></Input> -->
                        <!-- <Input-number style="width:210px;" placeholder="限制人数" size="large"  v-model="data_add.perqty"  :min="1" :value="null"></Input-number> -->
                        <InputNumber  :min="1"  v-model="data_add.perqty" style="width:210px;" size="large"></InputNumber>
                    </FormItem>
                    <FormItem label="活动大图：" prop="mpicpath" style="display: inline-block;"> 
                        <Upload
                          style="display: inline-block;"
                         :action="upload_url"
                         :on-success="handleSuccess"
                         :format="['jpg','jpeg','png']"
                         :max-size="2048"
                         >
                                <Button icon="ios-cloud-upload-outline" size="large">上传图片</Button>                                 
                        </Upload>                        
                        <img v-if="data_add.mpicpath" class="img_yu" @click="yu_lan" style="width:auto;height:30px;" :src="data_add.mpicpath" >                       
                        <!-- <input type="text" v-model="data_add.mpicpath" style="display:none;"> -->
                        
                    </FormItem>
                    <FormItem label="活动描述：" prop="actcontent">
                        <Input type="textarea" v-model="data_add.actcontent" :rows="6" :maxlength="200" size="large" :number="true" placeholder="请输入活动描述"></Input>
                    </FormItem>
                </Form>
            </div>
            <div slot="footer">
                <Button size="large"  @click="modal_add=false">关闭</Button>
                <Button type="primary" @click="sure_add('data_add')" size="large" :loading="modal_loading_add">确定新增</Button>
            </div>
        </Modal>
        
        <!-- 修改 -->
        <Modal title="修改" v-model="modal_edit" class-name="community_activities" :mask-closable="false">
            <div>
                <Form :label-width="100" class='fomr'  ref="data_fix" :model="data_fix" :rules="fix_rules1">
                    <FormItem label="活动标题：" prop="acttitle">
                        <Input type="text" v-model="data_fix.acttitle" size="large"  placeholder="请输入活动标题" style="width:99%"></Input>
                    </FormItem>
                    <FormItem label="活动开始：" prop="actbegtsStr" style="display: inline-block;">
                        <DatePicker type="datetime" v-model="data_fix.actbegtsStr" size="large" placeholder="请选择时间" ></DatePicker>
                    </FormItem>
                    <FormItem label="活动结束：" prop="actendtsStr" style="display: inline-block;">
                        <DatePicker type="datetime"  v-model="data_fix.actendtsStr" size="large" placeholder="请选择时间"></DatePicker>
                    </FormItem>
                    <FormItem label="报名开始：" prop="regbegtsStr" style="display: inline-block;">
                        <DatePicker type="datetime" v-model="data_fix.regbegtsStr" size="large" placeholder="请选择时间" ></DatePicker>
                    </FormItem>
                    <FormItem label="报名结束：" prop="regendtsStr" style="display: inline-block;">
                        <DatePicker type="datetime" v-model="data_fix.regendtsStr" size="large" placeholder="请选择时间"></DatePicker>
                    </FormItem>
                    <FormItem label="限制人数：" prop="perqty" style="display: inline-block;">
                        <!-- <Input type="email" size="large" v-model="data_add.perqty" :number="true" style="width:210px;" placeholder="限制人数"></Input> -->
                        <!-- <Input-number style="width:210px;" placeholder="限制人数" size="large"  v-model="data_add.perqty"  :min="1" :value="null"></Input-number> -->
                        <InputNumber  :min="1"  v-model="data_fix.perqty" style="width:210px;"></InputNumber>
                    </FormItem>
                    <FormItem label="活动大图：" style="display: inline-block;" prop="mpicpath"> 
                        <Upload
                          style="display: inline-block;"
                         :action="upload_url"
                         :on-success="handleSuccess1"
                         :format="['jpg','jpeg','png']"
                         :max-size="2048"
                         >
                                <Button icon="ios-cloud-upload-outline">上传图片</Button>                                 
                        </Upload>                        
                        <img  class="img_yu" @click="yu_lan1" style="width:auto;height:30px;" :src="data_fix.mpicpath" >                       
                        <!-- <input type="text" v-model="data_fix.mpicpath" style="display:none;"> -->
                        
                    </FormItem>
                    <FormItem label="活动描述：" prop="actcontent">
                        <Input type="textarea" v-model="data_fix.actcontent" :rows="6" :maxlength="200" size="large" :number="true" placeholder="请输入活动描述"></Input>
                    </FormItem>
                </Form>
            </div>
            <div slot="footer">
                <Button size="large"  @click="modal_edit=false">关闭</Button>
                <Button type="primary" @click="sure_fix('data_fix')" size="large" :loading="modal_loading_edit">确定修改</Button>
            </div>
        </Modal>
         <!-- 增加预览图片模态框 -->
       <Modal title="图片预览" v-model="modal2" class-name="community_activities" :mask-closable="false">
            <div>
                <Form :label-width="100" class='fomr'>
                    <FormItem label="图片预览：">
                        <img  class="x_q" :src="data_add.mpicpath" alt="">
                    </FormItem>                 

                </Form>
            </div>
            <div slot="footer">
                <Button size="large" :loading="modal_loading_edit" @click="modal2=false">关闭</Button>
                <!-- <Button type="primary" size="large" :loading="modal_loading_edit">确定修改</Button> -->
            </div>
        </Modal>
         <!-- 修改预览图片模态框 -->
       <Modal title="图片预览" v-model="modal3" class-name="community_activities" :mask-closable="false">
            <div>
                <Form :label-width="100" class='fomr'>
                    <FormItem label="图片预览：">
                        <img  class="x_q" :src="data_fix.mpicpath" alt="">
                    </FormItem>                 

                </Form>
            </div>
            <div slot="footer">
                <Button size="large" :loading="modal_loading_edit" @click="modal3=false">关闭</Button>
                <!-- <Button type="primary" size="large" :loading="modal_loading_edit">确定修改</Button> -->
            </div>
        </Modal>
    </div>
</template>

<script>
import { Checkbox } from "iview";
import {
  getBaseAreaactsPageData,
  addBaseAreaacts,
  deleteBaseAreaacts,
  updateBaseAreaacts,
  exportBaseAreaactsById
} from "../../../apis/api_property_services.js";
import { mapGetters, mapState } from "vuex";
import { validate } from "../../../utils/validate.js";

export default {
  name: "community_activities",
  data() {
    return {
      upload_url: "/upload",
      value: "",
      tab_loading: false,
      modal3: false,
      modal2: false,
      columns: [
        {
          title: "活动标题",
          key: "acttitle",
          tooltip:true
        },
        {
          title: "活动时间",
          key: "actbegtsStr",
          minWidth: 80
        },
        {
          title: "报名时间",
          key: "regbegtsStr",
          minWidth: 80
        },
        {
          title: "限制人数",
          key: "perqty"
        },
        {
          title: "报名人数",
          key: "regqty"
        },
        {
          title: "发布人",
          key: "createusername"
        },
        {
          title: "状态",
          key: "stutas"
        },
        {
          title: "操作",
          key: "",
          width: 300,
          render: (h, params) => {
            let self = this;
            let isTrue = params.row.isTrue;
            let sel = () => {
              self.data[params.index].isTrue = !self.data[params.index].isTrue;
            };
            return (
              <div class="lastcoll">
                <i
                  on-click={() => self.to_detail(params)}
                  class="ivu-icon ivu-icon-ios-paper-outline icon_weight"
                  title="详情"
                >
                  详情
                </i>
                <i
                  on-click={() => self.fix(params)}
                  class="ivu-icon ivu-icon-ios-create-outline icon_weight"
                  title="修改"
                >
                  修改
                </i>
                <i
                  on-click={() => self.del(params)}
                  class="ivu-icon ivu-icon-ios-trash-outline icon_weight"
                  title="删除"
                >
                  删除
                </i>
              </div>
            );
          }
        }
      ],
      modal_loading_add: false,
      modal_add: false,
      modal_edit: false,
      modal_loading_edit: false,
      data: {
        allCount: 0,
        currPage: 1,
        datas: [],
        pageCount: 0,
        pageSize: 0
      },
      data_axios: {
        pageSize: 10,
        pageIndex: 1,
        acttitle: "",
        userid: ""
      },
      data_fix: {
        acttitle: "",
        acttitlecolor: "",
        mpicpath: "",
        actbegtsStr: "",
        actendtsStr: "",
        regbegtsStr: "",
        regendtsStr: "",
        perqty: 1,
        modifyuserid: "",
        modifyusername: "",
        areaid: "",
        areaname: "",
        merchantid: "",
        merchantname: "",
        actcontent: ""
      },
      data_add: {
        id: "",
        acttitle: "",
        acttitlecolor: "#333333",
        mpicpath: "",
        actbegtsStr: "",
        actendtsStr: "",
        regbegtsStr: "",
        regendtsStr: "",
        perqty: 1,
        createuserid: "",
        createusername: "",
        areaid: "",
        areaname: "",
        merchantid: "",
        merchantname: "",
        actcontent: ""
      },
      fix_rules: {
        acttitle: [
          { required: true, message: "活动标题不能为空", trigger: "blur" }
        ],
        actbegtsStr: [{ required: true, message: "开始时间不能为空" }
        ],
        actendtsStr: [{ required: true, message: "结束时间不能为空" },
              {validator:(rule, value, callback)=>{
                    if(value >= this.data_add.actbegtsStr){
                        callback();
                    }else{
                        callback(new Error('活动结束时间不能小于开始时间'));
                    };
                }}],
        regbegtsStr: [{ required: true, message: "报名开始时间不能为空" },
                {validator:(rule, value, callback)=>{
                    if(value <= this.data_add.actbegtsStr){
                        callback();
                    }else{
                        callback(new Error('报名开始时间不能小于活动开始时间'));
                    };
                }}
        ],
        regendtsStr: [{ required: true, message: "报名截止时间不能为空" },
              {validator:(rule, value, callback)=>{
                    if(value >= this.data_add.regbegtsStr){
                        callback();
                    }else if(value <= this.data_fix.actbegtsStr){
                        callback(new Error('报名结束时间不能小于活动开始时间'));
                    }else{
                        callback(new Error('报名结束时间不能小于报名开始时间'));
                    }
                }}
        ],
        perqty: [{ required: true, message: "限制人数不能为空" }],
        actcontent: [
          {
            required: true,
            message: "活动内容（描述）不能为空",
            trigger: "blur"
          }
        ],
        mpicpath: [{ required: true, message: "活动图片不能为空" }]
      },
      fix_rules1: {
        acttitle: [
          { required: true, message: "活动标题不能为空", trigger: "blur" }
        ],
        actbegtsStr: [{ required: true, message: "开始时间不能为空" }],
        actendtsStr: [{ required: true, message: "结束时间不能为空" },
            {validator:(rule, value, callback)=>{
                    if(value >= this.data_fix.actbegtsStr){
                        callback();
                    }else{
                        callback(new Error('活动结束时间不能小于活动开始时间'));
                    };
                }}
        ],
        regbegtsStr: [{ required: true, message: "报名开始时间不能为空" },
              {validator:(rule, value, callback)=>{
                    if(value <= this.data_fix.actbegtsStr){
                        callback();
                    }else{
                        callback(new Error('报名开始时间不能小于活动开始时间'));
                    };
                }}
        ],
        regendtsStr: [{ required: true, message: "报名截止时间不能为空" },
              {validator:(rule, value, callback)=>{
                    if(value >= this.data_fix.regbegtsStr){
                        callback();
                    }else if(value <= this.data_fix.actbegtsStr){
                        callback(new Error('报名结束时间不能小于活动开始时间'));
                    }else{
                        callback(new Error('报名结束时间不能小于报名开始时间'));
                    }
                }}
        ],
        perqty: [{ required: true, message: "限制人数不能为空" }],
        actcontent: [
          {
            required: true,
            message: "活动内容（描述）不能为空",
            trigger: "blur"
          }
        ],
        mpicpath: [{ required: true, message: "活动图片不能为空" }]
      },
    };
  },
  computed: { ...mapGetters(["userdata", "pageSize"]) },
  mounted() {
    this.data_axios.userid = this.userdata.userid;
    this.getBaseAreaactsPageData();
  },
  methods: {
    //   预览
    yu_lan() {
      this.modal2 = true;
    },
    yu_lan1() {
      this.modal3 = true;
    },
    //   上传
    handleSuccess(res, file) {
        this.data_add.mpicpath = res.data;
        this.$refs["data_add"].validateField('mpicpath',()=>{})
    },
     handleSuccess1(res, file) {
         this.data_fix.mpicpath = res.data;
         this.$refs["data_fix"].validateField('mpicpath',()=>{})
    },
    // 删除
    del(parms) {
      this.$Modal.confirm({
        title: "确认提醒",
        content: "<p>是否要确认删除这条信息？</p>",
        onOk: () => {
          // this.$Message.info("Clicked ok");
          this.deleteBaseAreaacts(parms);
        }
      });
    },
    deleteBaseAreaacts(parms) {
      deleteBaseAreaacts({
        idList: parms.row.id
      }).then(({ msg, data, code }) => {
        if (code == 0) {
          this.$Message.success(msg);
          this.getBaseAreaactsPageData();
        } else {
          this.$Message.error(msg);
        }
        this.tab_loading = false;
      });
    },
    to_detail(params) {
      this.$router.push({name:"community_activities_detail",query:{id:params.row.id}});
    },
    // 转换时间类型
    changeDate(dateA) {
      var dateee = new Date(dateA).toJSON();
      var date = new Date(+new Date(dateee) + 8 * 3600 * 1000)
        .toISOString()
        .replace(/T/g, " ")
        .replace(/\.[\d]{3}Z/, "");
      return date;
    },
    // 新增显示
    modal_add_show(){
      this.data_add={
        id: "",
        acttitle: "",
        acttitlecolor: "#333333",
        mpicpath: "",
        actbegtsStr: "",
        actendtsStr: "",
        regbegtsStr: "",
        regendtsStr: "",
        perqty: 1,
        createuserid: "",
        createusername: "",
        areaid: "",
        areaname: "",
        merchantid: "",
        merchantname: "",
        actcontent: ""
      };
      this.modal_loading_add=false;
      this.modal_add=true;
    },
    // 新增
    sure_add(from) {
      this.$refs[from].validate(valid => {
        if (valid) {
          this.addBaseAreaacts(from);
        }
      });
    },
    addBaseAreaacts(from) {
      this.modal_loading_add = true;
      this.data_add.actbegtsStr = this.changeDate(this.data_add.actbegtsStr);
      this.data_add.actendtsStr = this.changeDate(this.data_add.actendtsStr);
      this.data_add.regbegtsStr = this.changeDate(this.data_add.regbegtsStr);
      this.data_add.regendtsStr = this.changeDate(this.data_add.regendtsStr);
      addBaseAreaacts(this.data_add).then(({ msg, data, code }) => {
        if (code == 0) {
          this.announcement_modal = false;
          this.$Message.success(msg);
          this.$refs[from].resetFields();
          this.getBaseAreaactsPageData();
        } else {
          this.$Message.error(msg);
        }
        this.modal_add = false;
      });
    },
    // 修改
    fix(params) {
      this.modal_edit = true;
      this.modal_loading_edit=false;
      this.data_fix.acttitle = params.row.acttitle;
      this.data_fix.actbegtsStr = params.row.actbegtsStr;
      this.data_fix.actendtsStr = params.row.actendtsStr;
      this.data_fix.regbegtsStr = params.row.regbegtsStr;
      this.data_fix.regendtsStr = params.row.regendtsStr;
      this.data_fix.perqty = params.row.perqty;
      this.data_fix.mpicpath = params.row.mpicpath;
      this.data_fix.actcontent = params.row.actcontent;
      this.data_fix.id = params.row.id;
      this.data_fix.modifyuserid = this.userdata.userid;
      this.data_fix.modifyusername = this.userdata.realname;
      this.data_fix.areaid = this.userdata.areaid;
      this.data_fix.areaname = this.userdata.areaname;
      this.data_fix.merchantid = this.userdata.merchantid;
      this.data_fix.merchantname = this.userdata.merchantname;
    },
    sure_fix(from) {
      this.$refs[from].validate(valid => {
        if (valid) {
          this.updateBaseAreaacts(from);
        }
      });
    },
    updateBaseAreaacts(from) {
      this.modal_loading_edit = true;
      this.data_fix.actbegtsStr = this.changeDate(this.data_fix.actbegtsStr);
      this.data_fix.actendtsStr = this.changeDate(this.data_fix.actendtsStr);
      this.data_fix.regbegtsStr = this.changeDate(this.data_fix.regbegtsStr);
      this.data_fix.regendtsStr = this.changeDate(this.data_fix.regendtsStr);
    
      updateBaseAreaacts(this.data_fix).then(({ msg, data, code }) => {
        if (code == 0) {
          this.announcement_modal = false;
          this.$Message.success(msg);
          // this.$refs[from].resetFields();
          this.getBaseAreaactsPageData();
        } else {
          this.$Message.error(msg);
        }
        this.modal_loading_edit = false;
      });
    },
    // 搜索
    search(reset) {
      if (reset) {
        this.value="";
      }
      this.data_axios.acttitle = this.value;
      this.getBaseAreaactsPageData();
    },
    //   加载表格
    getBaseAreaactsPageData(pageIndex = 1) {
      this.data_axios.pageIndex = pageIndex;
      this.tab_loading = true;
      getBaseAreaactsPageData(this.data_axios).then(({ msg, data, code }) => {
        if (code == 0) {
          this.data = data;
        } else {
          this.data = [];
        }
        this.tab_loading = false;
      });
    },
    // 导出
    export1(){
      this.exportBaseAreaactsById();
    },
    exportBaseAreaactsById(){
        exportBaseAreaactsById({
          id:this.row.id
        }).then(({ msg, data, code }) => {
        if (code == 0) {
          this.$Message.success(msg);
        } else {
          this.$Message.error(msg);
          
        }
        
      });
    },
  }
};
</script>

<style lang="scss">
@import "./../../../assets/color.scss";
@import "./../../../assets/size.scss";

.community_activities {
  .ivu-modal {
    width: 660px !important;
  }
}
.x_q {
  width: 384px;
  height: auto;
  display: block;
  margin: 0 auto;
}
.img_yu {
  position: absolute;
  left: 120px;
  top: 2px;
  cursor: pointer;
}
.butt_yu {
  position: absolute;
  left: 120px;
  top: 2px;
}
.ivu-upload-list {
  display: none;
}
</style>


